<template>
  <div>
    <el-button type="primary" icon="search" @click="loginBatch"
      >批量登录</el-button
    >
    中心:116.290761,39.826009 东：116.294761 距离341 +0.004 南：39.823009
    距离333 -0.003 西：116.286761 距离341 -0.004 北：39.829009 距离333 +0.003
    东南：116.294761,39.823009 西南：116.286761,39.823009
    东北：116.294761,39.829009 西北：116.286761,39.829009
    <div id="container"></div>
    <div class="info">输入或点击地图获取经纬度。</div>
    <div class="input-card" style="width: 28rem">
      <label style="color: grey">逆地理编码，根据经纬度获取地址信息</label>
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text">经纬度</span>
        </div>
        <input id="lnglat" type="text" value="116.290761,39.826009" />
      </div>
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text">地址</span>
        </div>
        <input id="address" type="text" disabled />
      </div>
      <input id="regeo" type="button" class="btn" value="经纬度 -> 地址" />
    </div>
  </div>
</template>

<script>
import user from '@/api/user';
export default {
  name: 'functionality',
  methods: {
    loginBatch() {
      user
        .loginBatch()
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    numToAAddress(params) {
      user
        .numToAAddress(params)
        .then((res) => {
          console.log(res.data);
          let result = res.data;
          console.log(result.formatted_address);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    // var map = new AMap.Map('container');
    // var map = new AMap.Map('container', {
    //     zoom: 18,//级别
    //     center: [116.29063210767256, 39.82535609344802],//中心点坐标

    // });
    this.numToAAddress({ location: '116.294761,39.823009' });

    var map = new AMap.Map('container', {
      center: [116.294761, 39.823009],
      resizeEnable: true,
      zoom: 18,
    });
    let p1 = [116.290761, 39.826009];
    let ppp = ['116.308865', '39.949719'];
    let pp = [
      { name: '李智杰', kk: [116.284211, 39.797541] },
      { name: '陈腾', kk: [116.298331, 39.788711] },
      { name: '杨俊杰', kk: [116.284211, 39.797541] },
      { name: '张琳', kk: [116.299561, 39.787391] },
      { name: '张志顺', kk: [116.221771, 39.796131] },
      { name: '连赛', kk: [116.225381, 39.783101] },
      { name: '李永伦', kk: [116.221771, 39.796131] },
      { name: '申天宇', kk: [116.214431, 39.772771] },
      { name: '金彪', kk: [116.348291, 39.803251] },
      { name: '孙彦星', kk: [116.348291, 39.803251] },
      { name: '杜梦圆', kk: [116.225321, 39.741461] },
      { name: '王聪聪', kk: [116.213491, 39.772111] },
      { name: '刘焕', kk: [116.294071, 39.824151] },
    ];

    pp.forEach((element) => {
      console.log(
        element.name +
          '家距离邮储总部基地直线距离---' +
          AMap.GeometryUtil.distance(p1, element.kk) +
          '米'
      );
      console.log(
        element.name +
          '家距离青政大厦直线距离---' +
          AMap.GeometryUtil.distance(ppp, element.kk) +
          '米'
      );
    });

    let p2 = [116.29063210767256, 39.82535609344802];
    // 返回 p1 到 p2 间的地面距离，单位：米
    var dis = AMap.GeometryUtil.distance(p1, p2);

    console.log(dis, '距离');
    console.log(73.32805633544922, '距离2');

    var geocoder = new AMap.Geocoder({
      city: '010', //城市设为北京，默认：“全国”
      radius: 500, //范围，默认：500
    });
    var marker = new AMap.Marker();
    var marker1 = new AMap.Marker();
    var marker2 = new AMap.Marker();
    var marker3 = new AMap.Marker();
    var marker4 = new AMap.Marker();
    function regeoCode() {
      var lnglat = document.getElementById('lnglat').value.split(',');
      map.add(marker);
      map.add(marker1);
      map.add(marker2);
      map.add(marker3);
      map.add(marker4);
      marker.setPosition(lnglat);
      marker1.setPosition([116.294761, 39.823009]);
      marker2.setPosition([116.286761, 39.823009]);
      marker3.setPosition([116.294761, 39.829009]);
      marker4.setPosition([116.286761, 39.829009]);

      console.log(lnglat, 'llll');

      geocoder.getAddress(lnglat, function (status, result) {
        console.log(status, result);
        if (status === 'complete' && result.regeocode) {
          var address = result.regeocode.formattedAddress;
          document.getElementById('address').value = address;
        } else {
          log.error('根据经纬度查询地址失败');
        }
      });
    }

    map.enableScrollWheelZoom(); // 启动鼠标滚轮操作

    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);

    map.on('click', function (e) {
      document.getElementById('lnglat').value = e.lnglat;
      regeoCode();
    });
    document.getElementById('regeo').onclick = regeoCode;
    document.getElementById('lnglat').onkeydown = function (e) {
      if (e.keyCode === 13) {
        regeoCode();
        return false;
      }
      return true;
    };
  },

  data() {
    return {
      // longitude: '116.29063210767256',
      // latitude: '39.82535609344802',
      // longitude: '116.297',
      // latitude: '39.832',
      longitude: '116.290761',
      latitude: '39.826009',
    };
  },
  watch: {
    longitude(val) {
      this.change();
    },
    latitude(val) {
      this.change();
    },
  },
};
</script>

<style scoped>
#container {
  width: 500px;
  height: 600px;
}
</style>
